<template>
    <div class="Box">
        <!-- 输入任意文本 -->
        <!-- <div>
            {{authInfo}}
        </div> -->
        <van-field v-model="eventName" label-width="8.2em" type="text" autosize placeholder="请输入事件名称" label="事件名称：" />
        <van-row>
            <van-col span="12">
                <div class="picTitle">请选择事件类型：</div>
            </van-col>
            <van-col span="11">
                <van-dropdown-menu active-color="#1989FA">
                    <van-dropdown-item v-model="optionVal" :options="options"/>
                </van-dropdown-menu>
            </van-col>
            <van-col span="11">
            </van-col>   
        </van-row>
        <van-divider  :style="{margin:'0px'}"/>
        <van-field v-model="eventPeople" label-width="8.2em" type="text"  placeholder="请输入现场联系人" label="现场联系人：" />
        <van-field v-model="eventPeopleTel" label-width="8.2em" type="text"  placeholder="请输入现场联系人方式" label="现场联系人方式：" />
        <van-field
            v-model="eventInfo"
            rows="1"
            autosize
            label="事件详情："
            label-width="10em" 
            type="textarea"
            placeholder="事件详情"
        />
        <div class="picTitle1">现场照片：</div>
        <van-uploader v-model="fileList" multiple />
        <van-divider  :style="{margin:'0px'}"/>
        <div class="picTitle1">请选择事件发生位置：</div>
        <Map @location="getMsgFormSon"/>
        <div class="bottomBtn" @click="tanchu">提交</div>
        <div class="empty"></div>
    </div>
</template>
<script>
import axios from "axios"
import Map from "./Map"
import { Dialog,Toast } from 'vant';
import dd from 'gdt-jsapi';
export default {
    name:'Report',
    components:{
        Map
    },
    data(){
        return{
            eventName: '',
            eventPeople: '',
            eventPeopleTel: '',
            xzjdInfo:'',
            fileList: [
                // { url: 'https://img01.yzcdn.cn/vant/leaf.jpg' },
                // // Uploader 根据文件后缀来判断是否为图片文件
                // // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
                // { url: 'https://cloud-image', isImage: true },
            ],
            optionVal: 0,
            options: [
                { text: '水务', value: 0 },
                { text: '供电', value: 1 },
                { text: '消防', value: 2 },
                { text: '特种设备', value: 3 },
                { text: '交通', value: 4 },
                { text: '通信', value: 5 },
                { text: '其他', value: 6 },
            ],
            eventInfo:'',
            point:[],
            address:'',
            auth_code:"",
            authInfo:null,
            employeeCode:null, //员工code
            organizationCode:null, //组织code
            govEmpPosJob:'', //员工职位
            organizationName:'' //员工组织
        }
    },
    computed:{
        // list(){
        //     return JSON.parse(localStorage.item)
        // }
    },
    mounted(){
        document.title = '事件上报'; 
        let that = this;
        async function getUser(){
            //获取accessToken
            let accessTokenData = await axios.get(`${window.reportUrl}/gettoken.json`);
            let accessToken = accessTokenData.data.content.data.accessToken
            //获取authCode
            let authCode = dd.getAuthCode({corpId: ""});
            //获取用户信息
            let userContentData = axios.post(`${window.reportUrl}/getUserinfo`,{access_token:accessToken,auth_code:authCode})
            let userContent = JSON.parse(userContentData.data.content)
            console.log(userContent)
            let employeeCode = userContent.data.employeeCode
            that.employeeCode = userContent.data.employeeCode
            that.eventPeople = userContent.data.lastName
            //获取用户职位
            let govEmpPosJob = axios.get(`${window.reportUrl}/getUserJob?employeeCode=${employeeCode}`)
            let userContent1 = JSON.parse(govEmpPosJob.data.content)
             console.log(userContent1)
            let organizationCode = userContent1.data.organizationCode
            that.govEmpPosJob = userContent1.data.govEmpPosJob
            that.organizationCode = userContent1.data.organizationCode
            //获取用户组织
            let userContent2 =  axios.get(`${window.reportUrl}/getOrganization?organizationCode=${organizationCode}`)
            userContent2 = JSON.parse(res4.data.content)
            that.organizationName = userContent2.data.organizationName
            console.log(userContent2)
        }
        getUser()
    },
    methods:{
        getMsgFormSon(point,address){
            this.point = point;
            this.address = address
        },
        tanchu(){   
            Dialog.confirm({
                title: '确认提交？',
                message: '提交后无法修改，确认提交请点击“确认”按钮',
                confirmButtonColor:'#2074D4'
            })
            .then(() => {
                // on confirm
                this.upload()
                console.log("输出")
            })
            .catch(() => {
                // on cancel
            });
        },
        upload(){
            this.$store.commit("showLoading");
            let eventObj = {
                epName: this.eventName,
                epType: this.options[this.optionVal].text,
                epLinkman: this.eventPeople,
                epPhone: this.eventPeopleTel,
                epDesc: this.eventInfo,
                epAddr: this.address?"":this.address,
                epLon: this.point[0]==undefined?parseFloat(0.0):this.point[0],
                epLat: this.point[1]==undefined?parseFloat(0.0):this.point[1]
            }
            console.log(eventObj)
            //获取文件名称
            let fileList = this.fileList.map((item)=>{
                return item.file
            })
            let formData = new FormData();
            formData.append("eventReportReq", new Blob([JSON.stringify(eventObj)],{type:"application/json;charset=UTF-8"}))
            
            fileList.forEach((item,index)=>{
                formData.append("muFiles",item)
            })
            axios.post(`${window.apiUrl}/api/event-report/add`,formData,{headers: {'Content-Type': 'multipart/form-data'}}).then((res)=>{
                console.log(res)
                this.$store.commit("hideLoading");
                if(res.data.code==200){
                    Toast.success({
                        duration: 3000,     
                        message:"上传成功"
                    });
                }else{
                    Toast.fail({
                        duration: 3000,     
                        message:"上传失败"
                    });
                }
            }).catch((e)=>{
                this.$store.commit("hideLoading");
                Toast.fail({
                    duration: 3000,     
                    message:"上传失败"
                });
            })
        },
        
        fileChange(e){
            //图片转base64;
            var that = this;
            var file = e.target.files[0];
            console.log(file);
            if(that.pic1 != ""){
                that.pic2 = file.name
            }else{
                that.pic1 = file.name
            }
            var  r = new FileReader(); 
            r.readAsDataURL(file); 
            r.onload = function(e) {
                var base64 = e.target.result;
                if(that.pic1Str != ""){
                    that.pic2Str = base64
                }else{
                    that.pic1Str = base64
                }
            }
        },
        addToHome(){
            var that = this;
            this.isJG = false
            var params = new URLSearchParams();
            params.append('TaskId', that.list.TaskId);
            params.append('Image1', this.pic1);
            params.append('Image2', this.pic2);
            params.append('Image1Str', this.pic1Str.slice(23));
            params.append('Image2Str', this.pic2Str.slice(23));
            params.append("Record", this.bilu)    
            axios({
                method: 'post',
                url:  that.$store.state.ServerUrl + "api/TaskPush/UpdateTaskInfo",
                data: params
            })
            .then((response)=>{
                if(response.data){
                    that.$router.push('/home');
                }else{
                    that.isT = false
                }
            })
            //qingqiu 
        },
        canel(){
            this.isJG = false
        }
    }
}
</script>
<style >
    .Box .van-dropdown-menu__bar{
        box-shadow:none
    }
    .Box .van-dropdown-menu__bar{
        box-shadow:none
    }
    .Box .van-field__label{
        font-size:.32rem;
        font-weight:500;
        color: #000;
        font-family: PingFangSC, PingFangSC-Medium;
    }
    .Box .van-cell{
        font-size:.32rem;
        line-height:.96rem;
    }
    .Box .van-cell__title span{
        font-size:.32rem;
    }
    .Box .van-cell__left-icon{
        font-size:.32rem;
    }
    .Box .van-cell__value{
        font-size: .28rem;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: right;
        color: #e3e3e3;
    }
    .Box .van-field__control{
        text-align:end;
    }
    .Box .van-dropdown-menu__item{
        justify-content: flex-end;
    }
</style>
<style lang="scss" scoped>
    .Box{
        .picTitle{
            text-align:left;
            padding:.1rem;
            padding-left:.3rem;
            line-height:.96rem;
            height:.96rem;
            font-size:.32rem;
            font-weight:500;
            color: #000;
            font-family: PingFangSC, PingFangSC-Medium;
        }
        .picTitle1{
            text-align:left;
            padding-left:.1rem;
            padding-left:.3rem;
            line-height:.96rem;
            height:.96rem;
            font-size:.32rem;
            font-weight:500;
            color: #000;
            font-family: PingFangSC, PingFangSC-Medium;
        }
        .bottomBtn{
            width :80%;
            height :1rem;
            line-height :1rem;
            margin :0rem auto;
            margin-bottom:.30rem;
            background :#409EFF;
            color:#fff;
            font-size :.4rem;
            text-align: center;
            border-radius:.2rem;
        }
        .empty{
            height :2rem;
        }
        .daigo{
            width:100%;
            height:100vh;
            background:rgba(0,0,0,.3);
            position:fixed;
            top:0;
            left:0;
            right:0;
            bottom:0;
            margin:auto;
            .content{
                width:6rem;
                height:3.32rem;
                background:#fff;
                margin: 0 auto;
                margin-top:4.7rem;
                .tCon{
                    width: 3.69rem;
                    height: .9rem;
                    margin: 0 auto;
                    padding-top: .6rem;
                    padding-bottom: .9rem;
                    font-size:.32rem;
                    text-align:center;
                    line-height:.45rem;
                    font-weight:600;
                }
                .tBtn{
                    width: 3.69rem;
                    display: flex;
                    margin: 0 auto;
                    justify-content: space-between;
                    color: #fff;
                    .tbtn1{
                        width: 1.6rem;
                        line-height: .6rem;
                        text-align : center;
                        color: #409EFF;
                        border: 1px solid #409EFF;
                        border-radius: .4rem;
                    }
                    .tbtn2 {
                        width:1.6rem;
                        line-height:.6rem;
                        text-align : center;
                        border-radius: .4rem;
                        background: #409EFF;
                    }
                }
            }
        }
    }

</style>


